<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding: 0; margin: 0;}
			#banner {
				margin: auto;
				width: 600px; height: 200px;
				position: relative;
				overflow: hidden;
			}
			.banner-ul{
				list-style: none;
				width: 3600px; height: 200px;
				position: absolute;
				left: 0;
				top: 0;
			}
			.banner-ul-li {
				float: left;
				width: 600px; height: 200px;
				font-size: 80px;
				font-weight: bold;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<script>
		$(function(){
			var index = 0;
			setInterval(function(){
				index = ++index%6;
				$("#banner .banner-ul").animate({left: -600*index}, function(){
					if(index == 5) {
						$("#banner .banner-ul").css("left",0);
						index++;
					}
				})
			},1000);
		})
	</script>
	<body>
		<div id="banner">
			<ul class="banner-ul">
				<li class="banner-ul-li" style="background: red;">A</li>
				<li class="banner-ul-li" style="background: goldenrod;">B</li>
				<li class="banner-ul-li" style="background: cornflowerblue;">C</li>
				<li class="banner-ul-li" style="background: green;">D</li>
				<li class="banner-ul-li" style="background: violet;">E</li>
				<li class="banner-ul-li" style="background: red;">A</li>
			</ul>
		</div>
	</body>
</html>
